<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算对比</title>
    <link rel="stylesheet" href="./build/css/contrast.css">
    <script src="./libs/jquery/jquery-1.8.3.min.js"></script>
    <script src="./libs/vue/vuedev.js"></script>
    <script type="text/javascript" src="./libs/echarts.min.js"></script>
    <script type="text/javascript" src="./libs/echarts-gl.min.js"></script>
</head>
<body>
     <div class="wrap">
        <div class="title">
            <div>计算结果</div>
            <div class="close"   @click="close">x</div>
        </div>
        <div class="main"  v-if="initdata.type==0">
            <div class="content pdContent">
                根据计算，你现在 <span class="mark">投入{{initdata.singleCompoundIncome.totalIncome}}元</span> 到 <span class="mark">{{initdata.singleCompoundIncome.rate}}%</span> 年化收益率的产品上，可在 <span class="mark">{{initdata.singleCompoundIncome.term}}年</span> 后,可获得如下收入 ：
            </div>
            <div>
                <table border="1" style="border-collapse:collapse;">
                    <tr>
                        <th></th>
                        <th>收入（元）</th>
                        <th>累计收益（元）</th>
                    </tr>
                    <tr>
                        <td>单利计算</td>
                        <td>{{initdata.singleCompoundIncome.singleIncome}}</td>
                        <td>{{initdata.singleCompoundIncome.singleProfit}}</td>
                    </tr>
                    <tr>
                        <td>复利计算</td>
                        <td>{{initdata.singleCompoundIncome.compoundIncome}}</td>
                        <td>{{initdata.singleCompoundIncome.compoundProfit}}</td>
                    </tr>
                </table>   
            </div>
            <div class="talk pdContent">
                
                1. 单利是本金固定，到期后一次性结算利息，而本金所产生的利息不再计算利息。<br>
                2. 复利是利滚利，即把上一期的本金和利息作为下一期的本金来计算利息。
                                        
            </div>
            <div>
                 <div  id="myLine"  class="pie"   ></div>
            </div>
            <div >
                <table border="1" style="border-collapse:collapse;">
                    <tr>
                        <th>年份</th>
                        <th>单利收入（元）</th>
                        <th>复利收益（元）</th>
                    </tr>
                    <tbody   v-for="(i1,id) in initdata.singleCompoundIncome.data" >
                        <tr>
                                <td>第{{i1.year}}年</td>     
                                <td>{{i1.singleIncome}}</td>     
                                <td>{{i1.compoundIncome}}</td>     
                        </tr>
                    </tbody>

                </table>                  
            </div>
        </div>

        <div class="main"  v-if="initdata.type==1">
                <div class="content lineContent">
                        设定产品的年化收益率为{{initdata.income.rate}}%，投资期限为{{initdata.income.term}}年。
                </div>
                <div>
                        <table border="1" style="border-collapse:collapse;">
                                <tr>
                                    <th></th>
                                    <th>一次性投资</th>
                                    <th>每年定投</th>
                                    <th>每月定投</th>
                                </tr>
                                <tr>
                                    <td>总投入（元）</td>
                                    <td  style="text-align: center"  colspan="3">{{initdata.income.totalInvestment}}</td> 
                                </tr>
                                <tr>
                                    <td>定投（元）</td>
                                    <td>--</td>
                                    <td>{{initdata.income.fixedInvestment.fixed}}</td>
                                    <td>{{initdata.income.fixedMonthInvestment.fixed}}</td>
                                </tr>
                                <tr>
                                    <td>总收入（元）</td>
                                    <td>{{initdata.income.oneInvestment.totalIncome}}</td>
                                    <td>{{initdata.income.fixedInvestment.totalIncome}}</td>
                                    <td>{{initdata.income.fixedMonthInvestment.totalIncome}}</td>
                                </tr>
                                <tr>
                                    <td>收益（元）</td>
                                    <td>{{initdata.income.oneInvestment.profit}}</td>
                                    <td>{{initdata.income.fixedInvestment.profit}}</td>
                                    <td>{{initdata.income.fixedMonthInvestment.profit}}</td>
                                </tr>
                            </table>                      
                </div>
                <div>
                  <div id="pieCon" class="pie"   ></div>
                </div>
        </div>


        <div class="main"  v-if="initdata.type==2">
                <div class="content lineContent">
                        设定产品的年化收益率为{{initdata.investment.rate}}%，投资期限为{{initdata.investment.term}}年。
                </div>
                <div>
                        <table border="1" style="border-collapse:collapse;">
                                <tr>
                                    <th></th>
                                    <th>一次性投资</th>
                                    <th>每年定投</th>
                                    <th>每月定投</th>
                                </tr>
                                <tr>
                                    <td>目标金额（元）</td>
                                    <td style="text-align: center"  colspan="3">{{initdata.investment.totalIncome}}</td>
                                </tr>
                                <tr>
                                    <td>定投（元）</td>
                                    <td>--</td>
                                    <td>{{initdata.investment.fixedInvestment.fixed}}</td>
                                    <td>{{initdata.investment.fixedMonthInvestment.fixed}}</td>
                                </tr>
                                <tr>
                                    <td>总投入（元）</td>
                                    <td>{{initdata.investment.oneInvestment.totalInvestment}}</td>
                                    <td>{{initdata.investment.fixedInvestment.totalInvestment}}</td>
                                    <td>{{initdata.investment.fixedMonthInvestment.totalInvestment}}</td>
                                </tr>
                                <tr>
                                    <td>收益（元）</td>
                                    <td>{{initdata.investment.oneInvestment.profit}}</td>
                                    <td>{{initdata.investment.fixedInvestment.profit}}</td>
                                    <td>{{initdata.investment.fixedMonthInvestment.profit}}</td>
                                </tr>
                            </table>                      
                </div>
                <div>
                  <div id="pieCon2" class="pie"   ></div>
                </div>
        </div>

     </div>
      
     <script src="./build/js/contrast.js"></script>
     <script src="./libs/main.js"></script>
     <script>
         var appdata={
                type:1, 
                income:{ // 对比一次性投资和定投间的收入差异
                        totalInvestment : 10000, //总投入（元）
                        rate :6, // 年化收益率
                        term : 5, // 期限
                        oneInvestment:{ //一次性投资
                            totalIncome:108.00, //总收入
                            profit:108.00,		//收益（元）
                       	 },

                        fixedInvestment:{ //每年定投
                            fixed:108.00, //年定投金额
                            totalIncome:108.00, //总收入
                            profit:108.00,		//收益（元）
                       	 },
                        
                    fixedMonthInvestment:{ //每月定投
                            fixed:108.00, //月定投金额
                            totalIncome:108.00, //总收入
                            profit:108.00,		//收益（元）
                       	 }        
                },
                investment:{ // 对比一次性投资和定投间的投入差异
                        totalIncome: 10000, //目标金额（元）
                        rate :7, // 年化收益率
                        term : 8, // 期限
                        oneInvestment:{ //一次性投资
                            totalInvestment:108.00, //总投入（元）
                            profit:1084.00,		//收益（元）
                       	 },

                        fixedInvestment:{ //每年定投
                            fixed:108.00, //年定投金额
                            totalInvestment:108.00, //总投入
                            profit:1084.00,		//收益（元）
                       	 },           
                    fixedMonthInvestment:{ //每月定投
                            fixed:108.00, //月定投金额
                            totalInvestment:108.00, //总投入
                            profit:1084.00,		//收益（元）
                       	 }
                },
               
                 singleCompoundIncome:{ //  对比单利和复利间的收入差异 
                    
                    rate:8, // 年化收益率 单位 %
                    term:2 ,// 期限 单位年
                    totalIncome:8,//总收入 单位元
                    data:[ // 列表
                        {
                            compoundIncome:108.00,// 复利收入  单位元
                            year:1,// 年份 单位 年
                            singleIncome:108.00 //单利收入 单位元
                        },
                        {
                            compoundIncome:116.64,
                            year:2,
                            singleIncome:116.00
                        }
                    ],
                    compoundIncome:116.64, // 复利总收入 单位元 
                    compoundProfit:16.64, //复利累计收益 单位元 
                    singleIncome:116.00, // 单利总收入 单位元
                    singleProfit:16.00, // 单利累计收益 单位元                   
                }
          }
    //    vm.appgetdata( JSON.stringify(appdata))
       vm.appgetdata(appdata)
     </script>
</body>
</html>
